<script setup>
import { ref } from 'vue';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';

const props = defineProps(['visible']);
const emit = defineEmits(['update:visible', 'ok']);

const label = ref('');
function ok() {
  emit('ok', label.value);
  emit('update:visible', false);
}
</script>

<template>
  <div class="tag-editor">
    <a-input v-model:value="label" :maxlength="20" placeholder="标签文字" @keydown.enter="ok"></a-input>

    <a-button
      :disabled="!label"
      @click="ok">
      <template #icon><check-outlined style="color: green;" /></template>
    </a-button>

    <a-button @click="() => $emit('update:visible', false)">
      <template #icon><close-outlined style="color: rgb(200,0,0);" /></template>
    </a-button>
  </div>
</template>

<style>
.tag-editor {
  --border: 1px solid rgb(228,228,228);
  display: flex;
  gap: .75em;
  align-items: center;
  width: auto;
  padding: 1em;
  border: var(--border);
  background: #fff;
  border-radius: 4px;
}

.tag-editor .ant-input-affix-wrapper { flex: 1; }
.tag-editor > *:not(:first-child) { flex-shrink: 0; }
.tag-editor .ant-btn { border-radius: 4px; }
</style>
